<template>
	<div id="hospInterface">
		<shyt-table
			ref="shytTable"
			:columns="columns"
			:data="tableData"
			:auto-resize="true"
			:keep-source="true"
			:pager-config="pageConfig"
			:toolbar-config="toolbarConfig"
			:edit-config="{ trigger: 'dbclick', mode: 'row', showStatus: true }"
			@page-change="pageChange"
		>
			<!-- @page-change="pageChange" -->
			<template #orgName="{ row }">
				<span>{{ row.orgName }}</span>
			</template>
			<template #typeName="{ row }">
				<span>{{ row.typeName }}</span>
			</template>
			<template #interfaceName="{ row }">
				<span>{{ row.interfaceName }}</span>
			</template>
			<template #interfaceUrl="{ row }">
				<span>{{ row.interfaceUrl }}</span>
			</template>
			<template #remark="{ row }">
				<span>{{ row.remark }}</span>
			</template>
			<template #code="{ row }">
				<span>{{ row.urlCode }}</span>
			</template>
			<!-- <template #expiryDate="{ row }"> </template> -->
			<template #edit="{ row }">
				<el-button type="text" size="small" @click="handlerEditRow(row)"
					>编辑</el-button
				>
				<el-button type="text" size="small" @click="deldectUser(row)"
					>删除</el-button
				>
			</template>
			<template #toolbar_buttons>
				<el-input
					v-model="interfaceName"
					class="user_input"
					placeholder="请输入要查找的接口名称"
					size="medium"
				></el-input>
				<el-button type="primary" size="small" @click="handlerSave">
					查询
				</el-button>
				<el-button type="primary" size="small" @click="handlerAddClick">
					新增
				</el-button>
			</template>
		</shyt-table>
		<!-- 新增 -->
		<newService
			:dialog-table-visible="dialogTableVisible"
			@newlyClick="newlyClick"
		></newService>
		<!-- 编辑 -->
		<redactService
			:compile-dialog-table-visible="compileDialogTableVisible"
			:compile-row="compileRow"
			@compileClick="compileClick"
		></redactService>
	</div>
</template>

<script>
import newService from './components/newlyDialog.vue'
import redactService from './components/modificationDialog.vue'
import { hospInterfacePageList, deleteHospInterface } from '@/http/common.js'
export default {
	name: 'ServiceApi',
	components: {
		newService,
		redactService,
	},
	data() {
		return {
			// 查询
			interfaceName: '',
			// 编辑
			compileRow: {},
			abc: '',
			// 新增弹框
			dialogTableVisible: false,
			compileDialogTableVisible: false,
			tableData: [
				// { a: 'name测试', b: '代码测试', c: 'Key测试', d: '0', e: '2021-10-31' },
			],
			columns: [
				{
					field: 'orgName',
					title: '机构名称',
					slots: { default: 'orgName' },
				},
				{
					field: 'typeName',
					title: '接口类型',
					slots: { default: 'typeName' },
				},
				{
					field: 'interfaceName',
					title: '接口名称',
					slots: { default: 'interfaceName' },
				},
				{
					field: 'interfaceUrl',
					title: '接口地址',
					slots: { default: 'interfaceUrl' },
				},
				{
					field: 'remark',
					title: '接口描述',
					slots: { default: 'remark' },
				},
				{
					field: 'code',
					title: '接口编码',
					slots: { default: 'code' },
				},
				{
					title: '操作',
					slots: { default: 'edit' },
				},
			],
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			//分页
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 0,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
		}
	},
	created() {
		this.dataList('', this.pageConfig.currentPage, this.pageConfig.pageSize)
	},
	methods: {
		dataList(inputCode, pageNum, pageSize) {
			hospInterfacePageList({
				inputCode: inputCode,
				pageNum: pageNum,
				pageSize: pageSize,
			}).then(({ data }) => {
				this.tableData = data.data.records
				this.pageConfig.total = data.data.total
				console.log(data.data.records)
			})
		},
		// 查询
		handlerSave() {
			this.pageConfig.currentPage = 1
			this.pageConfig.pageSize = 10
			this.dataList(
				this.interfaceName,
				this.pageConfig.currentPage,
				this.pageConfig.pageSize,
			)
		},
		// 新增
		handlerAddClick() {
			this.dialogTableVisible = true
		},
		//分页
		pageChange({ currentPage, pageSize }) {
			this.dataList(this.interfaceName.toUpperCase(), currentPage, pageSize)
			this.pageConfig.currentPage = currentPage
			this.pageConfig.pageSize = pageSize
		},
		// 编辑
		handlerEditRow(row) {
			this.compileDialogTableVisible = true
			this.compileRow = this._.cloneDeep(row)
			console.log(row)
		},
		// 删除
		deldectUser(row) {
			console.log(row, '删除')
			this.$confirm('是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				deleteHospInterface({ id: row.id }).then(({ data }) => {
					console.log(data)
					if (data.head.code == 200) {
						this.$message({
							type: 'success',
							message: '删除成功!',
						})
						this.dataList(
							this.interfaceName,
							this.pageConfig.currentPage,
							this.pageConfig.pageSize,
						)
					}
				})
			})
		},

		// 新增弹框组件
		newlyClick(newly) {
			this.dialogTableVisible = newly.verdict
			if (newly.typeValue == 1) {
				setTimeout(() => {
					this.dataList('', 1, 10)
				}, 500)
			}
		},
		// 编辑弹框组件
		compileClick(compile) {
			this.compileDialogTableVisible = compile.verdict
			if (compile.typeValue == 1) {
				setTimeout(() => {
					this.dataList(
						this.interfaceName,
						this.pageConfig.currentPage,
						this.pageConfig.pageSize,
					)
				}, 500)
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.user_input {
	width: 200px;
}
</style>
